<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>支付宝修改</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style media="screen">
        html,
        body {
            background: #fff;
        }

        .wrap {
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .wrap .zfb_icon {
            width: 63px;
            height: 63px;
            margin: 0 auto;
            margin-top: 18px;
        }

        .wrap .zfb_icon img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .modify_name {
            width: 100%;
            margin-top: 53px;
            overflow: hidden;
        }

        .modify_name .title {
            width: 100%;
            height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 15px;
        }

        .modify_name .box_input {
            width: 100%;
            height: 16px;
            font-size: 15px;
            font-family: PingFang SC;
            color: #333333;
            line-height: 16px;
            margin-top: 17px;
        }

        .modify_name .box_input input {
            width: 100%;
            height: 100%;
            display: block;
            font-size: 15px;
            font-family: PingFang SC;
            color: #333333;
            line-height: 100%;
        }

        .wrap .comfirm {
            width: 100%;
            height: 40px;
            line-height: 40px;
            background: linear-gradient(266deg, #7619EC, #A429F3);
            border-radius: 20px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
            text-align: center;
            margin-top: 46.5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="zfb_icon">
                <img src="../../image/zfb_icon.png" alt="">
            </div>
            <div class="modify_name">
                <div class="title">姓名</div>
                <div class="box_input">
                    <input type="text" v-model='username' placeholder="请输入姓名">
                </div>
            </div>
            <div class="modify_name" style="margin-top:22.5px;">
                <div class="title">支付宝</div>
                <div class="box_input">
                    <input type="text" v-model='acount' placeholder="请输入支付宝账号">
                </div>
            </div>

            <div class="comfirm" @click='comfirm()'>下一步</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        console.log(cl.mid);
        console.log(api.pageParam.id);
        if (api.pageParam.id == 0) {
            vm.username = $api.getStorage('truename');
            vm.acount = $api.getStorage('zfbAccount');
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {
            username: '',
            acount: ''
        },
        methods: {
            comfirm: function() {
                if (!vm.username) {
                    cl.toast({
                        msg: '请输入姓名'
                    });
                    return;
                };
                if (vm.acount != '') {
                    if (cl.phoneNumberVerify.test(vm.acount) == false && cl.emailVerify.test(vm.acount) == false) {
                        cl.toast({
                            msg: '请输入正确的手机号或邮箱格式'
                        })
                        return;
                    }

                    console.log(cl.mid);
                    if (cl.phoneNumberVerify.test(vm.acount) == true && cl.emailVerify.test(vm.acount) == false) {
                        console.log(vm.acount);
                        api.ajax({
                            url: cl.apiServer + 'zfbAccount/updateZfbInfo',
                            method: 'post',
                            headers: {
                                'Content-Type': 'application/json;charset=utf-8',
                                token:cl.userToken
                            },
                            data: {
                                body: {
                                    zfbAccount: vm.acount,
                                    mid: cl.mid,
                                    truename: vm.username,
                                    version:cl.deviceInfo().appVersion,
                                    mobileInfo:cl.systemType()
                                }
                            }
                        }, function(ret, err) {
                            console.log(JSON.stringify(ret));
                            if (ret) {
                                if (ret.code == 0) {
                                    api.ajax({
                                        url: cl.apiServer + 'member/getInfo/' + cl.mid,
                                        method: 'get',
                                        headers: {
                                            token:cl.userToken
                                        }
                                    }, function(ret, err) {
                                        console.log(JSON.stringify(ret));
                                        if (ret) {
                                            if (ret.code == 0) {
                                                $api.setStorage('zfbAccount', ret.data.zfbAccount);
                                                $api.setStorage('truename', ret.data.truename);
                                                api.sendEvent({
                                                    name: 'refreshuserinfo'
                                                });

                                                setTimeout(function() {
                                                    cl.closeWin({
                                                        name: "modify_zfb"
                                                    });
                                                }, 1000)
                                            }
                                        }
                                    })
                                }
                            }
                        })
                    }
                    if (cl.phoneNumberVerify.test(vm.acount) == false && cl.emailVerify.test(vm.acount) == true) {
                        api.ajax({
                            url: cl.apiServer + 'zfbAccount/updateZfbInfo',
                            method: 'post',
                            headers: {
                                'Content-Type': 'application/json;charset=utf-8',
                                token:cl.userToken
                            },
                            data: {
                                body: {
                                    account: vm.acount,
                                    mid: cl.mid,
                                    truename: vm.username,
                                    version:cl.deviceInfo().appVersion,
                                    mobileInfo:cl.systemType()
                                }
                            }
                        }, function(ret, err) {
                            console.log(JSON.stringify(ret));
                        })
                    }
                }
            }
        }
    });
</script>

</html>
